<template>
  <div class="home-main-bottom">
    <div class="home-bottom-col">
      <ChartsBottomItem
        height="100%"
        title="温/湿度（一层）"
        :data="floor1Data" />
    </div>
    <div class="home-bottom-col">
      <ChartsBottomItem
        height="100%"
        title="温/湿度（屏蔽车间）"
        :data="shieldData" />
    </div>
    <div class="home-bottom-col">
      <ChartsBottomItem
        height="100%"
        title="温/湿度（绝缘车间）"
        :data="insulateData" />
    </div>
  </div>
</template>
<script setup>
  import ChartsBottomItem from './ChartsBottomItem.vue';
  import request from '@/utils/request.js';

  // 阈值
  const { Floor1T, Floor1H, ShieldT, ShieldH, InsulateT, InsulateH } =
    window.thresholdData;

  const props = defineProps({
    data: {
      type: Array,
      default: () => [],
    },
  });
  watch(
    () => props.data,
    (newVal) => {
      formatData(newVal);
    }
  );
  const floor1Data = ref({
    seriesData: [],
  });
  const shieldData = ref({});
  const insulateData = ref({});

  const formatData = (wsContent = []) => {
    if (wsContent.length === 0) {
      return;
    }
    const lineOps = {
      type: 'line',
      showSymbol: false,
      smooth: true,
    };
    const _floor1Data = {
      seriesData: [
        {
          name: '温度',
          ...lineOps,
          data: [],
        },
        {
          name: '湿度',
          yAxisIndex: 1,
          ...lineOps,
          data: [],
        },
      ],
    };
    const _shieldData = {
      seriesData: [
        {
          name: '温度',
          ...lineOps,
          data: [],
        },
        {
          name: '湿度',
          yAxisIndex: 1,
          ...lineOps,
          data: [],
        },
      ],
    };
    const _insulateData = {
      seriesData: [
        {
          name: '温度',
          ...lineOps,
          data: [],
        },
        {
          name: '湿度',
          yAxisIndex: 1,
          ...lineOps,
          data: [],
        },
      ],
    };

    wsContent.slice(-20).forEach((c) => {
      const { dateTime } = c;
      _floor1Data.seriesData[0].data.push([dateTime, c.floor1T]);
      _floor1Data.seriesData[1].data.push([dateTime, c.floor1H]);

      _shieldData.seriesData[0].data.push([dateTime, c.shieldT]);
      _shieldData.seriesData[1].data.push([dateTime, c.shieldH]);

      _insulateData.seriesData[0].data.push([dateTime, c.insulateT]);
      _insulateData.seriesData[1].data.push([dateTime, c.insulateH]);
    });

    setMarkLine(Floor1T, _floor1Data, 0);
    setMarkLine(Floor1H, _floor1Data, 1);
    setMarkLine(ShieldT, _shieldData, 0);
    setMarkLine(ShieldT, _shieldData, 1);
    setMarkLine(InsulateT, _insulateData, 0);
    setMarkLine(InsulateT, _insulateData, 1);

    setMarkPoint(Floor1T, _floor1Data, 0);
    setMarkPoint(Floor1H, _floor1Data, 1);
    setMarkPoint(ShieldT, _shieldData, 0);
    setMarkPoint(ShieldH, _shieldData, 1);
    setMarkPoint(InsulateT, _insulateData, 0);
    setMarkPoint(InsulateH, _insulateData, 1);

    floor1Data.value = _floor1Data;
    shieldData.value = _shieldData;
    insulateData.value = _insulateData;
  };
  onMounted(() => {
    getData().then((res) => {
      formatData(JSON.parse(res.content));
    });
  });

  const setMarkLine = (threshold, data, index) => {
    const symbol = index === 1 ? ['none', 'rect'] : ['rect', 'none'];
    const symbolOffset =
      index === 1
        ? [
            [0, 0],
            ['50%', '50%'],
          ]
        : [
            ['-50%', '50%'],
            [0, 0],
          ];
    const color = index === 1 ? '#fffc00' : '#fe1a1a';

    const { seriesData } = data;
    seriesData[index].markLine = {
      data: [
        {
          name: '阈值',
          yAxis: threshold,
        },
      ],
      silent: true,
      lineStyle: {
        color,
        type: 'solid',
      },
      symbol,
      symbolOffset,
      label: {
        show: false,
        color,
        // position:'insideEndTop',
        formatter: (param) => {
          const { name } = param;
          return name;
        },
      },
    };
  };
  const setMarkPoint = (threshold, data, index) => {
    const { seriesData } = data;
    const pointData = [];
    const markPoint = {
      data: pointData,
      symbolSize: 24,
      label: { fontSize: 8, color: '#b5dbff' },
    };
    seriesData[index].data.forEach((sItem) => {
      const [dateTime, value] = sItem;
      if (value > threshold) {
        pointData.push({ coord: [dateTime, value], value });
      }
    });
    seriesData[index].markPoint = markPoint;
  };

  const getData = () => {
    return request({
      method: 'post',
      url: '/DataScreen/database/lulan',
      data: {
        'method': 'getTemperatureHumidity',
        'format': 'JSON',
        'content': `{\"id\":1,\"startTime\":null,\"endTime\":null}`,
      },
    });
  };
</script>
<style lang="scss" scoped>
  .home-main-bottom {
    height: calc((100% - 64%) - vw(20));
    margin-top: vw(20);
    display: flex;
    gap: vw(16);

    .home-bottom-col {
      width: 33.3333%;
      box-sizing: border-box;
    }
  }
</style>
